<template>
  <div style="width: 100%;height: 100%">
    <v-form-designer ref="vfDesigner" :designer-config="designerConfig">
      <template #customToolButtons>
        <el-button @click="save" type="text" icon="el-icon-plus">保存</el-button>
      </template>
    </v-form-designer>
  </div>
</template>

<script>

  import {save, getOne} from "../../api";

  export default {
    data() {
      return {
        fdId: '',
        designerConfig: {
          // 是否显示语言切换菜单
          languageMenu: false,
          // 是否显示GitHub、文档等外部链接
          externalLink: false,
          // 是否显示表单模板
          formTemplates: true,
          // 是否禁止修改唯一名称
          widgetNameReadonly: false,
          // 是否显示组件事件属性折叠面板
          eventCollapse: true,
          // 是否显示清空设计器按钮
          clearDesignerButton: true,
          // 是否显示预览表单按钮
          previewFormButton: true,
          // 是否显示导入JSON按钮
          importJsonButton: false,
          // 是否显示导出JSON器按钮
          exportJsonButton: false,
          // 是否显示导出代码按钮
          exportCodeButton: false,
          // 是否显示生成SFC按钮
          generateSFCButton: false,
          // 工具按钮栏最大宽度（单位px）
          toolbarMaxWidth: 180,
          // 工具栏按钮最小宽度（单位px）
          toolbarMinWidth: 180,
          // 表单设计器预设CSS代码
          presetCssCode: '',
        }
      }
    },
    mounted() {
      if (this.$route.query && this.$route.query.fdId) {
        this.fdId = this.$route.query.fdId;
        this.handlerQuery();
      }
    },
    beforeDestroy() {
      this.$refs.vfDesigner.clearDesigner()
    },
    methods: {
      handlerQuery() {
        if (this.fdId) {
          getOne(this.fdId).then(res => {
            if (res && res.data.code === 20000) {
              let jsonStr = res.data.data.fdFormContext;
              this.$refs.vfDesigner.setFormJson(JSON.parse(jsonStr))
            }
          });
        }
      },
      save() {
        let data = {
          'fdId': this.fdId,
          'fdFormContext': JSON.stringify(this.$refs.vfDesigner.getFormJson())
        };
        save(data).then(res => {
          console.log(res)
          if (res && res.data.code === 20000) {
            this.$message({
              message: '保存成功',
              type: 'success'
            });
          }
        })
      }
    },
  }
</script>

<style scoped>
  body {
    margin: 0;
  }

  /deep/ .main-header {
    display: none !important;
  }
</style>
